<template>
  <div>
    <div class="el-card">
      <!-- // 第一个div -->
      <div class="box1">
        <el-input
          placeholder="根据用户名搜索"
          size="small"
          v-model="input"
        ></el-input>
        <el-button size="small" style="margin-left: 15px" @click="clear"
          >清空</el-button
        >
        <el-button size="small" type="primary" @click="search">搜索</el-button>
        <el-button
          size="small"
          type="success"
          style="margin-left: 1224px"
          icon="el-icon-edit"
          @click="addNew"
          >新增用户</el-button
        >
        <el-dialog
          :title="addForm.id ? '编辑用户' : '创建用户'"
          :visible.sync="dialogVisible"
          width="50%"
          @close="close"
        >
          <el-form :model="addForm" size="large" :rules="rules" ref="add">
          <el-form-item label="用户名" prop="username" >
            <!-- 普通框修改 v-model 即可 -->
            <el-input
              v-model="addForm.username"
              autocomplete="off"
              size="medium"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <!-- 普通框修改 v-model 即可 -->
            <el-input
              v-model="addForm.email"
              autocomplete="off"
              size="medium"

            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password" v-if="addForm.id ? false : true">
            <!-- 普通框修改 v-model 即可 -->
            <el-input
              v-model="addForm.password"
              autocomplete="off"
              size="medium"

            ></el-input>
          </el-form-item>
          <el-form-item label="角色" prop="role">
            <el-input
              v-model="addForm.role"
              autocomplete="off"
              size="medium"
            ></el-input>
          </el-form-item>
          <el-form-item label="权限组名称" prop="permission_group_id">
            <!-- 普通框修改 v-model 即可 -->
            <el-select v-model="addForm.permission_group_id" placeholder="请选择">
              <!-- :label 为选择框显示内容, :value 为实际绑定在 addFrom.age 的内容 -->
              <el-option
                v-for="item in plist"
                :key="item.id"
                :label="item.title"
                size="medium"
                :value="item.id"
              ></el-option>
            </el-select>

          </el-form-item>
          <el-form-item label="联系电话" prop="phone">
            <el-input
              v-model="addForm.phone"
              autocomplete="off"
              size="medium"
            ></el-input>
          </el-form-item>
          <el-form-item label="介绍" prop="introduction">
            <el-input
              v-model="addForm.introduction"
              size="medium"
              autocomplete="off"
              type="textarea"
              placeholder="Please input"
            ></el-input>
          </el-form-item>
        </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button
            >
          </span>
        </el-dialog>
      </div>
      <div class="box2">
        <el-alert type="info" show-icon>
          <template slot="title"> 共 {{ tableData.length }} 条记录 </template>
        </el-alert>
      </div>
      <div class="box3">
        <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{ 'text-align': 'center', background: '#FAFAFA' }"
          :cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column prop="id" label="序号" width="260"></el-table-column>
          <el-table-column
            prop="email"
            label="邮箱"
            width="260"
          ></el-table-column>
          <el-table-column prop="phone" label="联系电话" width="260">
          </el-table-column>
          <el-table-column prop="username" label="用户名" width="260">
          </el-table-column>
          <el-table-column
            prop="permission_group_title"
            label="权限组名称"
            width="260"
          >
          </el-table-column>
          <el-table-column prop="role" label="角色" width="250">
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template v-slot="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click="edit(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="box4">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="this.pagesize"
          layout=" prev, pager, next,sizes,jumper"
          :total="tableData.length"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { list, add, update } from '@/api/base/users'
import { list as plist } from '@/api/base/permissions'
export default {
  data () {
    return {
      tableData: [],
      currentPage: 1,
      pagesize: 10,
      input: '',
      arr: [],
      dialogVisible: false,
      addForm: {
        id: '',
        username: '',
        password: '',
        phone: '',
        email: '',
        role: '',
        permission_group_title: '',
        introduction: '',
        account: '',
        fullName: '',
        permission_group_id: '',
        avatar: '',
        disabled: ''
      },
      plist: [],
      show: false,
      rules: {
        // 新建表单 正则  !!! 属性名需要与 addFrom 对应
        username: { required: true, message: '用户名不能为空', trigger: 'blur' },
        email: {
          required: true,
          message: '邮箱不能为空',
          trigger: 'blur'
        },
        password: { required: true, message: '密码不能为空' },
        permission_group_id: {
          required: true,
          message: '权限组名称不能为空',
          trigger: 'change'
        }
      }
    }
  },

  created () {
    this.getUserList()
    this.getPList()
  },

  methods: {
    close () {
      this.dialogVisible = false
      this.$refs.add.resetFields()
      this.addForm = {
        id: '',
        username: '',
        password: '',
        phone: '',
        email: '',
        role: '',
        permission_group_title: '',
        introduction: '',
        account: '',
        fullName: '',
        permission_group_id: '',
        avatar: '',
        disabled: ''
      }
    },
    async getUserList () {
      const { data } = await list({
        page: this.currentPage,
        pagesize: this.pagesize,
        username: this.input
      })
      console.log(data)
      this.tableData = data.list
    },
    async getPList () {
      const { data } = await plist({
        page: this.currentPage,
        pagesize: this.pagesize
      })
      this.plist = data.list
    },
    handleCurrentChange (val) {
      console.log(val)
    },
    handleSizeChange (val) {
      this.pagesize = val
    },
    search () {
      this.username = this.input
      this.getUserList()
      this.input = ''
    },
    clear () {
      this.keyword = ''
    },
    addNew () {
      this.dialogVisible = true
    },
    edit (row) {
      this.dialogVisible = true
      this.addForm = row
    },
    async submit () {
      if (!this.addForm.id) {
        await this.$refs.add.validate()
        await add(this.addForm)
        this.$message.success('创建用户成功')
        this.getUserList()
      } else {
        await update({
          avatar: this.addForm.avatar,
          email: this.addForm.email,
          id: this.addForm.id,
          introduction: this.addForm.introduction,
          permission_group_id: this.addForm.permission_group_id,
          phone: this.addForm.phone,
          username: this.addForm.username,
          role: this.addForm.role
        })
        this.$message.success('编辑用户成功')
        this.getUserList()
      }
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped lang="less">
.el-card {
  margin: 20px;
  padding: 20px;
  .box1 {
    display: flex;
    .el-input {
      width: 200px;
      height: 32px;
    }
    .el-dialog__wrapper {
  ::v-deep .el-dialog {
    border-radius: 10px;
    .el-dialog__body {
      padding: 28px 100px;
      .el-form-item{
        margin-bottom: 18px;
      }
      .el-form-item__label {
        width:160px;
      }
      .el-input{
        width: 280px !important;
        height: 36px
      }
      .el-textarea {
        width: 280px;
      }
    }
  }
}
  }
  .box2 {
    .el-alert {
      margin: 20px 0;
    }
  }
  .box4 {
    margin-top: 20px;
    display: flex;
    .el-pagination {
      margin-left: auto;
    }
  }
}
</style>
